import { ScrollBox } from "./ClassifyScroll.style"
import React, { memo, useEffect, useState } from 'react'
import Scroll from "@/baseUI/scroll"

function ClassifyScroll(props) {
    
    const {classifyList,setClassifyIndex,classifyIndex}=props
    const [scrollToDom,setScrollDom]=useState('')
    const changeClassifyTab=(e)=>{
        setScrollDom(e.target)
    }

    return (
        <Scroll
                direction='horizental'
                refresh={false}
                scrollToDom={scrollToDom}
            >
        <ScrollBox>
            {classifyList.map((item, index) => <div
                key={index + 'classfyScroll'}
                style={classifyIndex == index ? { "fontWeight": 700, "fontSize": '20px' } : {}}
                onClick={(e)=>{changeClassifyTab(e,index);setClassifyIndex(index)}}
            >{item}</div>)}
        </ScrollBox>
        </Scroll>
    )
}

export default memo(ClassifyScroll)
